<template>
    <div>
        <Col :span="spanLeft" class="layout-menu-left">
            <Menu active-name="1" theme="dark" width="auto">
                <div class="layout-logo-left"></div>
                <Submenu name="1">
                    <template slot="title">
                        <Icon type="ios-navigate" :size="iconSize"></Icon>
                        <span class="layout-text">用户管理</span>
                    </template>
                        <MenuItem name="1-1" :size="wordPadding">
                            <router-link class="sideLeftWord y_made" to="/adminselect">
                                    查询修改
                            </router-link>
                        </MenuItem>
                    <MenuItem name="1-2">新增用户</MenuItem>
                    <MenuItem name="1-3">管理权限</MenuItem>
                </Submenu>
                <Submenu name="2">
                    <template slot="title">
                        <Icon type="ios-keypad" :size="iconSize"></Icon>
                        <span class="layout-text">博客管理</span>
                    </template>
                        <MenuItem name="2-1">
                            <router-link class="sideLeftWord y_made" to="/blogs">
                                    博客树
                            </router-link>
                        </MenuItem>
                        <MenuItem class="sideLeftWord" name="2-2">
                            <router-link class="sideLeftWord y_made" to="/blogsupload">
                                    博客上传
                            </router-link>
                        </MenuItem>

                    <!-- <router-link v-on:click="changeMeanClass" :class="{'ivu-menu-item':true, 'router-link-exact-active':showMeanClass, 'router-link-active':showMeanClass}" name="2-1" to="/blogsupload">
                        博客上传
                    </router-link> -->
                </Submenu>
                <Submenu name="3">
                    <template slot="title">
                        <Icon type="ios-analytics" :size="iconSize"></Icon>
                        <span class="layout-text">留言管理</span>
                    </template>
                    <MenuItem name="3-1">选项 1</MenuItem>
                    <MenuItem name="3-2">选项 2</MenuItem>
                </Submenu>
            </Menu>
        </Col>
    </div>
</template>

<script>
    
    export default {
        data () {
            return {
                showMeanClass:false,
                spanLeft: 5,
                spanRight: 19
            }
        },
        components: {
        },
        computed: {
            iconSize () {
                return this.spanLeft === 5 ? 14 : 24;
            },
            wordPadding () {
                return this.spanLeft === 5 ? this.wordPaddingMethods() : this.wordPaddingMethodsTwo();
            }
        },
        methods: {
            changeMeanClass () {
                alert(1);
            },
            toggleClick () {
                if (this.spanLeft === 5) {
                    this.spanLeft = 2;
                    this.spanRight = 22;
                } else {
                    this.spanLeft = 5;
                    this.spanRight = 19;
                }
            },
            wordPaddingMethods () {
              console.log('文字正常大小');
            },
            wordPaddingMethodsTwo () {
              console.log('文字变小');
            }
        }
    }
</script>

<style lang="scss" scoped>
    .y_made{
        padding:14px 160px 14px 43px;
        margin:-14px -160px -14px -43px;
    }
    .sideLeftWord{
      color: rgba(255,255,255,.7);
      transition: all .4 ease;
      &:hover{
          color:rgba(255,255,255,1);
      }

    }
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        min-height: 745px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 10px;
    }
    .layout-copy{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
    .layout-menu-left{
        background: #464c5b;
    }
    .layout-header{
        height: 60px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-logo-left{
        width: 90%;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        margin: 15px auto;
    }
    .layout-ceiling-main a{
        color: #9ba7b5;
    }
    .layout-hide-text .layout-text{
        display: none;
    }
    .ivu-col{
        transition: width .2s ease-in-out;
    }
</style>
